/*
  学习目标：纯组件
  作用：直接判断传过来的 props 有没有变化，有变化就更新，没变化就不更新
  PureComponent 内部自动实现了 shouldComponentUpdate 钩子，不需要手动比较

  不建议滥用 PureComponent
  1. 就是一个静态的组件，不要props的内容渲染，建议直接使用 shouldComponentUpdate 返回false就可以了，省去比较的过程

  案例：
  1. Son改纯组件，它值关心 count 的变化，msg变化不会引起它更新
  2. Child组件，props的值对页面没影响，建议直接 shouldComponentUpdate 返回false，省去纯组件的判断

  工作时，怎么选择优化的手段：
  1. 很多时候，其实我们不做优化
  2. 如果组件依赖 props 的数据更新，那么直接用纯组件
  3. 如果组件不依赖 props 的数据更新，shouldComponentUpdate 返回false
*/

import React from 'react';
export default class App extends React.Component {
  state = {
    count: 0,
    msg: 'app',
  };

  render() {
    return (
      <div>
        <h1>数量： {this.state.count}</h1>
        <h1>msg: {this.state.msg}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我修改数量
        </button>
        <button onClick={() => this.setState({ msg: this.state.msg + '~' })}>
          点我修改msg
        </button>

        <Son count={this.state.count}></Son>
        <Child></Child>
      </div>
    );
  }
}

// 使用纯组件后，app上更新 msg，就不会引起Son组件也更新了
// 更新msg： 旧prop {count:0}  新prop {count:0}
class Son extends React.PureComponent {
  render() {
    console.log('我是Son，我render了 -----> ');
    return <div>我是Son - {this.props.count}</div>;
  }
}
// class Son extends React.Component {
//   shouldComponentUpdate(nextProps) {
//     console.log('nextProps -----> ', nextProps);
//     // 判断新的值 和 旧的值，如果相等，那就没必要更新，所以返回 false
//     // 如果有多个属性，那么每一个都要去判断是否改变，太麻烦
//     if (
//       nextProps.count === this.props.count &&
//       nextProps.msg === this.props.msg
//     ) {
//       return false;
//     } else {
//       return true;
//     }
//   }
//   render() {
//     console.log('我是Son，我render了 -----> ');
//     return <div>我是Son - {this.props.count}</div>;
//   }
// }

// props的值对页面没影响，建议直接 shouldComponentUpdate 返回false，省去纯组件的判断
class Child extends React.Component {
  state = { msg: 'child' };
  shouldComponentUpdate() {
    return false;
  }
  render() {
    console.log('我是Child，我render了 -----> ');
    return <div>我是Child</div>;
  }
}
